<template>
	<el-drawer
		title=""
		:visible.sync="drawer"
		:direction="direction"
		:before-close="handleClose"
		custom-class="drawer-info"
		append-to-body
		modal-append-to-body
	>
		<div class="info-item">
			<h5 class="from-title">基本信息</h5>
			<div class="form-item">
				<label class="form-item-label">课件分类:</label>
				<div class="form-item-content">{{ objInfo.classifyIdName }}</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">课件类型:</label>
				<div class="form-item-content">{{ objInfo.coursewareTypeName }}</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">课件名称:</label>
				<div class="form-item-content">{{ objInfo.coursewareName }}</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">学习时长:</label>
				<div class="form-item-content">{{ objInfo.studyTime }} 分钟</div>
			</div>
			<template v-if="objInfo.coursewareType == 3">
				<div class="form-item">
					<label class="form-item-label">视频课件简介:</label>
					<div class="form-item-content">{{ objInfo.videoSynopsis }}</div>
				</div>
			</template>
			<div class="form-item" v-if="objInfo.coursewareType == 1">
				<label class="form-item-label">课件地址:</label>
				<div class="form-item-content primary">
					<!-- <template v-for="(item, indexs) in objInfo.coursewareUrl">
						<a :key="indexs" :href="item.url" target="_blank">{{ item.name }}</a>
					</template> -->
					<div style="cursor: pointer;" @click="toPreview">{{ objInfo.originUrl }}</div>
				</div>
			</div>
			<div class="form-item" v-else-if="objInfo.coursewareType == 2">
				<label class="form-item-label">图文正文:</label>
				<div class="form-item-content" v-html="objInfo.coursewareContent"></div>
			</div>
			<div class="form-item" v-else-if="objInfo.coursewareType == 3">
				<label class="form-item-label">课件:</label>
				<video
					v-for="(item, index) in objInfo.coursewareUrl"
					:key="index"
					:src="item.url"
					style="width: 100%; height: 225px; display: block;"
					controls
				></video>
			</div>
			<!-- <div class="form-item">
				<label class="form-item-label">是否允许下载:</label>
				<div class="form-item-content" v-if="objInfo.isDownload == 1">启用</div>
				<div class="form-item-content" v-else>禁用</div>
			</div> -->
			<div class="form-item">
				<label class="form-item-label">排序:</label>
				<div class="form-item-content">{{ objInfo.sort }}</div>
			</div>
		</div>

		<el-dialog :visible.sync="visible" append-to-body modal-append-to-body width="60%" @close="onDialogClose">
			<template v-if="objInfo.coursewareType == 1">
				<img style="width: 100%; display: block;" :src="item.url" alt="" v-for="item in showUrl" :key="item.url" />
			</template>
			<template v-if="objInfo.coursewareType == 3">
				<video
					style="width: 100%; display: block; margin-bottom: 10px;"
					:src="item.url"
					v-for="item in showUrl"
					:key="item.url"
					controls="controls"
					class="courseware-video"
				/>
			</template>
		</el-dialog>
	</el-drawer>
</template>
<script>
import { studycoursewareInfo } from "@/api/study/course/studycourseware.js"
import { enumList, urlList } from "@/api/public.api.js"
export default {
	data() {
		return {
			drawer: true,
			direction: "rtl",
			objInfo: {},
			CoursewareTypeList: [],
			YesNoList: [],
			classifyIdList: [],

			visible: false,
			showUrl: "",
		}
	},
	created() {},
	methods: {
		toPreview() {
			if (this.objInfo.coursewareUrl.length) {
				this.visible = true
				this.showUrl = this.objInfo.coursewareUrl
			}
		},
		queryEnumList() {
			this.CoursewareTypeList = []
			enumList("CoursewareType", "").then(resp => {
				if (resp.code == 0) {
					this.CoursewareTypeList = resp.data
				}
			})
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
		},
		queryUrlList() {
			this.classifyIdList = []
			urlList("/study/course/studyCourseClassify/list").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.classifyIdList.push({ code: item.id, name: item.name })
						})
					}
				}
			})
		},
		init(id) {
			this.queryEnumList()
			this.queryUrlList()
			if (id) {
				studycoursewareInfo(id).then(res => {
					const origin = JSON.parse(res.data.originUrl || "[]")
					res.data.originUrl = origin.length ? origin[0].name : ""

					this.objInfo = res.data
					let classifyIdObj = this.classifyIdList.find(item => {
						return item.code == this.objInfo.classifyId
					})
					this.objInfo.classifyIdName = classifyIdObj ? classifyIdObj.name : ""
					let coursewareTypeObj = this.CoursewareTypeList.find(item => {
						return item.code == this.objInfo.coursewareType
					})
					this.objInfo.coursewareTypeName = coursewareTypeObj ? coursewareTypeObj.name : ""
					this.objInfo.coursewareUrl = JSON.parse(res.data.coursewareUrl)
				})
			}
			this.drawer = true
		},
		// 关闭抽屉
		handleClose(done) {
			done()
		},
		onDialogClose() {
			const video = document.querySelectorAll(".courseware-video")

			if (video.length) {
				video.forEach(item => {
					item.currentTime = 0
					item.pause()
				})
			}
		},
	},
}
</script>
<style scoped>
.from-title {
	margin-bottom: 20px;
	padding: 0 20px 20px 20px;
	font-size: 16px;
	color: #17233d;
	border-bottom: 1px solid #eee;
}
.info-item {
	margin-bottom: 40px;
}

.form-item {
	margin-bottom: 20px;
	font-size: 14px;
}
.form-item-label {
	text-align: right;
	float: left;
	width: 25%;
	min-width: 135px;
}
.form-item-content {
	margin-left: 30%;
	width: 70%;
}

.primary:hover {
	color: #409eff;
}
</style>
